<template>
    <!-- 带图标的节点头 -->
    <div class="timelinehead" :style="headStyle">
        <div class="headicon1" ><slot name="headicon"></slot></div>
        <div class="headcontent1" :style="contentStyle"><slot name="headcontent"></slot></div>
    </div>
</template>

<script scoped>
export default {
    name:'timelineheadicon',
    props:{
       bgcolor:{
            type:String,
            default:"#040D21"
        },
       contentcolor:{
            type:String,
            default:"white"
        }
    },
    computed:{
        headStyle(){
            return{
                backgroundColor:this.bgcolor,
            }
        },
        contentStyle(){
            return{
                color:this.contentcolor,
            }
        }
    }
}
</script>

<style>
.headicon1{
       width: 8px;
       height: 8px;
       border-radius: 50%;
       position: absolute;
       left: -6px;
   }
   .headcontent1{
       font-size: 1rem;
       width: 50%;
       padding-left: 30px;
       font-weight: bold;
   }
    .headicon1 img{
       width: 20px;
       left: -5px;
       position: absolute;
       background-color: #040D21;
   }
    .timelinehead{
       display: flex;
       position: relative;
       margin-top: 30px;
       margin-bottom: 30px;
       
   }
   .headicon{
       width: 8px;
       height: 8px;
       border-radius: 50%;
       position: absolute;
       left: -8px;
   }
    .headcontent{
       font-size: 1.2rem;
       width: 50%;
       padding-left: 30px;
   }
</style>